<template>
    <div>
        <div :style="menuBox">
            <div :style="leftmenubox" v-if="menuboxshow">
                <div id="fathermenu" :style="menubox">
                  <div :style="menuboxSonDiv" v-if="menu1">
                    <span :style="{color:wordcolor1,fontSize:'14px'}" v-on:click='gotousermanage()'>用&nbsp;&nbsp;户&nbsp;&nbsp;管&nbsp;&nbsp;理</span>
                  </div>
                  <div :style="[menuboxSonDiv,top20]" v-if="menu2">
                    <span :style="{color:wordcolor2,fontSize:'14px'}" v-on:click='gotodatachange()'>数&nbsp;&nbsp;据&nbsp;&nbsp;变&nbsp;&nbsp;更</span>
                  </div>
                  <div :style="[menuboxSonDiv,top40]" v-if="menu3">
                    <span :style="{color:wordcolor3,fontSize:'14px'}" v-on:click='gotoalertrecord()'>报&nbsp;&nbsp;警&nbsp;&nbsp;记&nbsp;&nbsp;录</span>
                  </div>
                  <div :style="[menuboxSonDiv,top60]" v-if="menu4">
                    <span :style="{color:wordcolor4,fontSize:'14px'}" v-on:click='gotosetrecord()'>设&nbsp;&nbsp;置&nbsp;&nbsp;记&nbsp;&nbsp;录</span>
                  </div>
                  <div :style="[menuboxSonDiv,top80]" v-if="menu5">
                    <span :style="{color:wordcolor5,fontSize:'14px'}" v-on:click='gotoprocessingrecord()'>处&nbsp;&nbsp;理&nbsp;&nbsp;记&nbsp;&nbsp;录</span>
                  </div>
                  <div :style="[menuboxSonDiv,top100]" v-if="menu6">
                    <span :style="{color:wordcolor6,fontSize:'14px'}" v-on:click='gotoalertparametersetup()'>阀&nbsp;&nbsp;值&nbsp;&nbsp;设&nbsp;&nbsp;置</span>
                  </div>
                  <div :style="[menuboxSonDiv,top120]" v-if="menu7">
                    <span :style="{color:wordcolor7,fontSize:'14px'}" v-on:click='gotoalertcount()'>报&nbsp;&nbsp;警&nbsp;&nbsp;统&nbsp;&nbsp;计</span>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
export default {
  name: 'homeleft',
  mounted () {
    this.sessionId = this.$route.query.username
    this.sign = this.$route.query.sign
    if (this.sign === '1') {
      this.menu1 = false
      this.menu2 = false
    } else if (this.sign === '2') {
      this.menuboxshow = false
    }
  },
  methods: {
    removewordcolor: function () {
      this.wordcolor1 = '#FFFFFF'
      this.wordcolor2 = '#FFFFFF'
      this.wordcolor3 = '#FFFFFF'
      this.wordcolor4 = '#FFFFFF'
      this.wordcolor5 = '#FFFFFF'
      this.wordcolor6 = '#FFFFFF'
      this.wordcolor7 = '#FFFFFF'
    },
    gotoalertcount: function () {
      this.removewordcolor()
      this.wordcolor7 = '#85C5E8'
      this.$router.push({path: '/alertcount', query: {username: this.sessionId, sign: this.sign}})
    },
    gotoalertrecord: function () {
      this.removewordcolor()
      this.wordcolor3 = '#85C5E8'
      this.$router.push({path: '/alertrecord', query: {username: this.sessionId, sign: this.sign}})
    },
    gotousermanage: function () {
      this.removewordcolor()
      this.wordcolor1 = '#85C5E8'
      this.$router.push({path: '/usermanage', query: {username: this.sessionId, sign: this.sign}})
    },
    gotodatachange: function () {
      this.removewordcolor()
      this.wordcolor2 = '#85C5E8'
      this.$router.push({path: '/datachange', query: {username: this.sessionId, sign: this.sign}})
    },
    gotosetrecord: function () {
      this.removewordcolor()
      this.wordcolor4 = '#85C5E8'
      this.$router.push({path: '/setrecord', query: {username: this.sessionId, sign: this.sign}})
    },
    gotoprocessingrecord: function () {
      this.removewordcolor()
      this.wordcolor5 = '#85C5E8'
      this.$router.push({path: '/processingrecord', query: {username: this.sessionId, sign: this.sign}})
    },
    gotoalertparametersetup: function () {
      this.removewordcolor()
      this.wordcolor6 = '#85C5E8'
      this.$router.push({path: '/alertparametersetup', query: {username: this.sessionId, sign: this.sign}})
    }
  },
  data () {
    return {
      menu1: true,
      menu2: true,
      menu3: true,
      menu4: true,
      menu5: true,
      menu6: true,
      menu7: true,
      menuboxshow: true,
      sign: '',
      sessionId: '',
      wordcolor1: '#FFFFFF',
      wordcolor2: '#FFFFFF',
      wordcolor3: '#FFFFFF',
      wordcolor4: '#FFFFFF',
      wordcolor5: '#FFFFFF',
      wordcolor6: '#FFFFFF',
      wordcolor7: '#FFFFFF',
      menuBox: {
        position: 'absolute'
      },
      menuboxSonDiv: {
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/12.png') + ')',
        position: 'relative',
        width: '123px',
        height: '22px',
        marginLeft: '37px',
        lineHeight: '20px'
      },
      leftmenubox: {
        position: 'relative',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/11.png') + ')',
        width: '170px',
        height: '450px',
        textAlign: 'center'
      },
      menubox: {
        position: 'absolute',
        width: '170px',
        height: '490px',
        marginTop: '15px',
        color: '#FFFFFF'
      },
      top20: {
        top: '30px'
      },
      top40: {
        top: '60px'
      },
      top60: {
        top: '90px'
      },
      top80: {
        top: '120px'
      },
      top100: {
        top: '150px'
      },
      top120: {
        top: '180px'
      }

    }
  }
}
</script>
<style scoped>
  span:hover {
    color: #85C5E8 !important;
  }
  span{
    cursor:pointer !important;
  }
</style>
